import React, { useState } from 'react';
import './App.css';
import Input from './Components/Todo/Input'
import List from './Components/Todo/List'


function App() {

  let [list, setList] = useState([
    {
      id: new Date().getTime(),
      title: '写作业',
      isDone: false
    }
  ])

  let addList = (title) => {
    list.push({
      id: new Date().getTime(),
      title: title,
      isDone: false
    });

    setList([...list]);

    console.log('addLst', list)
  }

  let editList = (id, title) => {
    list.forEach((item) => {
      if (item.id === id) {
        item.title = title;
      }

    });
    setList([...list]);
  }

  let delList = (id) => {
    list.forEach((item, i) => {
      if (item.id === id) {
        list.splice(i, 1)
      }
    });

    setList([...list]);
  }

  let isDone = (id, isDone) => {
    console.log('id', id);
    console.log('isDone', isDone);
    list.forEach((item) => {
      if (item.id === id) {
        item.isDone = isDone;
      }
    })
    setList([...list]);
    console.log('isDone', list)
  }



  return (
    <div>
      <h2>Todo list</h2>
      <Input addList={addList} ></Input>
      <List list={list} isDone={isDone} editList={editList} delList={delList} ></List>

    </div>
  )
}

export default App


